// 强制重置视频显示状态
function forceResetVideoDisplay() {
    console.log('=== 强制重置视频显示状态 ===');
    
    // 停止所有视频流
    if (videoStream) {
        videoStream.getTracks().forEach(track => track.stop());
        videoStream = null;
    }
    
    // 重置状态变量
    isVideoRunning = false;
    currentVideoElement = null;
    
    // 强制隐藏所有视频相关元素
    $('video').hide();
    $('canvas').hide();
    $('[id*="video"]').hide();
    
    // 显示占位符
    $('#videoPlaceholder').show();
    
    // 重置按钮状态
    $('#startVideoBtn').show();
    $('#stopVideoBtn').hide();
    $('#captureBtn').hide();
    
    // 重置统计
    $('#detectedFaces').text('0');
    $('#currentFPS').text('0');
    $('#recognizedFaces').text('0');
    $('#detectionCount').text('0');
    
    // 隐藏用户信息
    hideLiveUserInfo();
    
    console.log('强制重置完成');
    console.log('当前可见视频元素数量:', $('video:visible').length);
    console.log('当前可见Canvas元素数量:', $('canvas:visible').length);
}

// 调试函数：检查视频状态
function checkVideoStatus() {
    console.log('=== 视频状态检查 ===');
    console.log('isVideoRunning:', isVideoRunning);
    console.log('videoStream:', videoStream);
    console.log('canvas:', canvas);
    console.log('ctx:', ctx);
    console.log('currentVideoElement:', currentVideoElement);
    
    const videoElements = $('video');
    const canvasElements = $('canvas');
    
    console.log('页面中的视频元素数量:', videoElements.length);
    console.log('页面中的Canvas元素数量:', canvasElements.length);
    
    videoElements.each(function(index) {
        const video = $(this);
        console.log(`Video ${index + 1}:`, {
            id: video.attr('id'),
            display: video.css('display'),
            visible: video.is(':visible'),
            isCurrent: this === currentVideoElement
        });
    });
    
    canvasElements.each(function(index) {
        const canvas = $(this);
        console.log(`Canvas ${index + 1}:`, {
            id: canvas.attr('id'),
            display: canvas.css('display'),
            visible: canvas.is(':visible')
        });
    });
    
    console.log('videoElement:', document.getElementById('videoElement'));
    console.log('videoCanvas:', document.getElementById('videoCanvas'));
    console.log('videoPlaceholder visible:', $('#videoPlaceholder').is(':visible'));
    console.log('startVideoBtn visible:', $('#startVideoBtn').is(':visible'));
    console.log('stopVideoBtn visible:', $('#stopVideoBtn').is(':visible'));
    console.log('captureBtn visible:', $('#captureBtn').is(':visible'));
    
    // 检查显示状态
    const visibleVideos = $('video:visible');
    const visibleCanvases = $('canvas:visible');
    const placeholderVisible = $('#videoPlaceholder').is(':visible');
    
    console.log('=== 显示状态总结 ===');
    console.log('可见视频元素数量:', visibleVideos.length);
    console.log('可见Canvas元素数量:', visibleCanvases.length);
    console.log('占位符是否可见:', placeholderVisible);
    
    if (visibleVideos.length > 0) {
        console.warn('⚠️ 警告：有可见的视频元素，这可能导致重复显示');
    }
    
    if (visibleCanvases.length > 1) {
        console.warn('⚠️ 警告：有多个可见的Canvas元素');
    }
    
    if (visibleVideos.length > 0 && visibleCanvases.length > 0) {
        console.error('❌ 错误：同时有可见的视频和Canvas元素，这会导致重复显示');
    }
    
    console.log('==================');
}

// 测试函数：验证截图功能
function testCaptureFunction() {
    console.log('=== 测试截图功能 ===');
    console.log('当前 isVideoRunning 状态:', isVideoRunning);
    
    if (isVideoRunning) {
        console.log('视频正在运行，尝试截图...');
        captureFrame();
    } else {
        console.log('视频未运行，手动设置状态进行测试...');
        // 临时设置状态进行测试
        const originalState = isVideoRunning;
        isVideoRunning = true;
        console.log('临时设置 isVideoRunning = true');
        
        if (canvas && ctx) {
            console.log('Canvas 可用，尝试截图...');
            captureFrame();
        } else {
            console.log('Canvas 不可用，无法截图');
        }
        
        // 恢复原始状态
        isVideoRunning = originalState;
        console.log('恢复 isVideoRunning =', originalState);
    }
    console.log('=== 测试完成 ===');
}

// 修复重复显示问题
function fixDuplicateDisplay() {
    console.log('=== 修复重复显示问题 ===');
    
    const visibleVideos = $('video:visible');
    const visibleCanvases = $('canvas:visible');
    const placeholderVisible = $('#videoPlaceholder').is(':visible');
    
    console.log('修复前状态:');
    console.log('- 可见视频元素数量:', visibleVideos.length);
    console.log('- 可见Canvas元素数量:', visibleCanvases.length);
    console.log('- 占位符是否可见:', placeholderVisible);
    
    // 如果同时有可见的视频和Canvas，隐藏视频元素
    if (visibleVideos.length > 0 && visibleCanvases.length > 0) {
        console.warn('发现重复显示，隐藏视频元素');
        visibleVideos.hide();
    }
    
    // 如果有多个可见的Canvas，只保留一个
    if (visibleCanvases.length > 1) {
        console.warn('发现多个可见Canvas，只保留第一个');
        visibleCanvases.slice(1).hide();
    }
    
    // 如果没有任何可见元素，显示占位符
    if (visibleVideos.length === 0 && visibleCanvases.length === 0 && !placeholderVisible) {
        console.warn('没有可见元素，显示占位符');
        $('#videoPlaceholder').show();
    }
    
    const finalVisibleVideos = $('video:visible');
    const finalVisibleCanvases = $('canvas:visible');
    const finalPlaceholderVisible = $('#videoPlaceholder').is(':visible');
    
    console.log('修复后状态:');
    console.log('- 可见视频元素数量:', finalVisibleVideos.length);
    console.log('- 可见Canvas元素数量:', finalVisibleCanvases.length);
    console.log('- 占位符是否可见:', finalPlaceholderVisible);
    
    console.log('=== 修复完成 ===');
}

// 强制清理页面中的重复视频元素
function forceCleanupVideoElements() {
    console.log('=== 强制清理视频元素 ===');
    
    const allVideos = $('video');
    const videoCount = allVideos.length;
    
    console.log(`发现 ${videoCount} 个视频元素`);
    
    if (videoCount > 1) {
        console.warn('发现多个视频元素，开始清理...');
        
        // 保留第一个视频元素（应该是videoElement）
        const firstVideo = allVideos.first();
        const firstVideoId = firstVideo.attr('id');
        
        console.log(`保留第一个视频元素: ${firstVideoId}`);
        
        // 删除其他视频元素
        allVideos.slice(1).each(function(index) {
            const video = $(this);
            const videoId = video.attr('id');
            console.log(`删除视频元素 ${index + 2}: ${videoId}`);
            video.remove();
        });
        
        console.log('清理完成，剩余视频元素数量:', $('video').length);
    } else if (videoCount === 1) {
        const videoId = allVideos.first().attr('id');
        console.log(`只有一个视频元素: ${videoId}`);
    } else {
        console.warn('没有找到视频元素');
    }
    
    // 确保只有一个canvas元素
    const allCanvases = $('canvas');
    const canvasCount = allCanvases.length;
    
    if (canvasCount > 1) {
        console.warn(`发现 ${canvasCount} 个canvas元素，保留第一个`);
        allCanvases.slice(1).remove();
    }
    
    console.log('=== 清理完成 ===');
}

// 视频检测功能

// 视频检测相关变量
let videoStream = null;
let videoInterval = null;
let canvas = null;
let ctx = null;
let isVideoRunning = false;
let frameCount = 0;
let lastTime = 0;
let currentFPS = 0;
let detectionCount = 0;
let recognizedFacesCount = 0;
let detectionHistory = [];
let currentVideoElement = null; // 当前活动的视频元素

// 视频检测功能
function initVideoDetection() {
    console.log('初始化视频检测功能');
    
    // 强制清理重复的视频元素
    forceCleanupVideoElements();
    
    canvas = document.getElementById('videoCanvas');
    ctx = canvas.getContext('2d');
    
    console.log('Canvas初始化:', canvas, ctx);
    
    // 确保初始状态：只显示占位符
    ensureSingleVideoDisplay();
    
    // 页面加载完成后的额外检查
    setTimeout(() => {
        console.log('页面加载完成，检查视频元素状态...');
        const videoCount = $('video').length;
        const visibleVideoCount = $('video:visible').length;
        
        console.log(`页面中共有 ${videoCount} 个视频元素`);
        console.log(`当前可见视频元素数量: ${visibleVideoCount}`);
        
        // 详细检查每个视频元素
        $('video').each(function(index) {
            const video = $(this);
            console.log(`Video ${index + 1}:`, {
                id: video.attr('id'),
                display: video.css('display'),
                visible: video.is(':visible'),
                src: video.attr('src'),
                srcObject: video[0].srcObject
            });
        });
        
        if (visibleVideoCount > 0) {
            console.warn('发现页面加载时就有可见的视频元素，强制重置状态');
            ensureSingleVideoDisplay();
        }
        
        // 如果发现多个视频元素，强制删除多余的
        if (videoCount > 1) {
            console.error('发现多个视频元素，强制删除多余的');
            $('video').not('#videoElement').remove();
            console.log('删除多余视频元素后，剩余视频元素数量:', $('video').length);
        }
    }, 1000);
    
    // 开始视频检测
    $('#startVideoBtn').click(function() {
        console.log('开始视频检测按钮被点击');
        startVideoDetection();
    });
    
    // 停止视频检测
    $('#stopVideoBtn').click(function() {
        console.log('停止视频检测按钮被点击');
        stopVideoDetection();
    });
    
    // 截图功能
    $('#captureBtn').click(function() {
        console.log('截图按钮被点击');
        checkVideoStatus(); // 添加状态检查
        captureFrame();
    });
    
    // 检测历史功能
    $('#toggleHistory').click(toggleDetectionHistory);
    $('#clearHistory').click(clearDetectionHistory);
    
    console.log('视频检测功能初始化完成');
}

// 确保只显示一个视频播放区域
function ensureSingleVideoDisplay() {
    console.log('确保单一视频显示');
    
    // 检查是否有多个视频元素
    const allVideos = $('video');
    const videoCount = allVideos.length;
    
    if (videoCount > 1) {
        console.warn(`发现 ${videoCount} 个视频元素，删除多余的`);
        // 保留第一个视频元素，删除其他的
        allVideos.slice(1).remove();
        console.log('删除多余视频元素后，剩余视频元素数量:', $('video').length);
    }
    
    // 隐藏所有视频和canvas元素
    $('video').hide();
    $('canvas').hide();
    
    // 显示占位符
    $('#videoPlaceholder').show();
    
    // 重置当前视频元素
    currentVideoElement = null;
    
    // 验证没有视频元素可见
    const visibleVideos = $('video:visible');
    const visibleCanvases = $('canvas:visible');
    
    if (visibleVideos.length > 0) {
        console.warn('警告：发现可见视频元素，强制隐藏');
        visibleVideos.hide();
    }
    
    if (visibleCanvases.length > 0) {
        console.warn('警告：发现可见Canvas元素，强制隐藏');
        visibleCanvases.hide();
    }
    
    console.log('视频显示状态已重置，当前可见视频数量:', $('video:visible').length);
    console.log('当前视频元素总数:', $('video').length);
}

// 显示指定的视频元素
function showVideoElement(videoElement) {
    console.log('显示视频元素:', videoElement);
    
    // 检查是否有多个视频元素
    const allVideos = $('video');
    if (allVideos.length > 1) {
        console.warn(`显示前发现 ${allVideos.length} 个视频元素，清理多余的`);
        // 保留指定的视频元素，删除其他的
        allVideos.not(videoElement).remove();
    }
    
    // 强制隐藏所有视频和canvas元素
    $('video').hide();
    $('canvas').hide();
    
    // 隐藏占位符
    $('#videoPlaceholder').hide();
    
    // 只显示canvas，不显示videoElement
    // videoElement用于获取视频流，但不直接显示
    if (videoElement) {
        currentVideoElement = videoElement;
        // 不设置videoElement的display为block，保持隐藏
    }
    
    if (canvas) {
        canvas.style.display = 'block';
    }
    
    // 验证只有一个视频元素可见
    const visibleVideos = $('video:visible');
    const visibleCanvases = $('canvas:visible');
    
    console.log('显示完成，当前可见视频数量:', visibleVideos.length);
    console.log('当前可见Canvas数量:', visibleCanvases.length);
    console.log('当前视频元素总数:', $('video').length);
    
    if (visibleVideos.length > 0) {
        console.warn('警告：不应该有可见的视频元素，强制隐藏');
        visibleVideos.hide();
    }
    
    console.log('视频元素显示完成');
}

// 开始视频检测
async function startVideoDetection() {
    // 默认使用摄像头，启用所有检测功能
    const enableRecognition = true;
    const enableTracking = true;
    
    try {
        await startCameraDetection(enableRecognition, enableTracking);
    } catch (error) {
        showVideoResult('启动视频检测失败: ' + error.message, false);
    }
}

// 启动摄像头检测
async function startCameraDetection(enableRecognition, enableTracking) {
    try {
        // 请求摄像头权限
        videoStream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: { ideal: 640 },
                height: { ideal: 480 },
                facingMode: 'user'
            }
        });
        
        const video = document.getElementById('videoElement');
        video.srcObject = videoStream;
        
        // 等待视频加载
        await new Promise((resolve) => {
            video.onloadedmetadata = resolve;
        });
        
        // 设置canvas尺寸
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        
        // 显示视频和canvas
        showVideoElement(video);
        
        // 设置视频运行状态（在开始检测循环之前）
        isVideoRunning = true;
        console.log('摄像头检测已启动，isVideoRunning:', isVideoRunning);
        
        // 开始检测循环
        startDetectionLoop(video, enableRecognition, enableTracking);
        
        // 更新按钮状态
        $('#startVideoBtn').hide();
        $('#stopVideoBtn').show();
        $('#captureBtn').show();
        
        showVideoResult('摄像头检测已启动', true);
        
    } catch (error) {
        throw new Error('无法访问摄像头: ' + error.message);
    }
}

// 检测循环
function startDetectionLoop(video, enableRecognition, enableTracking) {
    let lastDetectionTime = 0;
    const detectionInterval = 2000; // 每2s检测一次，减少服务器压力
    
    console.log('开始检测循环，isVideoRunning:', isVideoRunning);
    
    function processFrame() {
        // 检查视频运行状态
        if (!isVideoRunning) {
            console.log('视频检测已停止，退出检测循环');
            return;
        }
        
        const currentTime = Date.now();
        
        // 绘制视频帧到canvas
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        // 计算FPS
        frameCount++;
        if (currentTime - lastTime >= 1000) {
            currentFPS = frameCount;
            frameCount = 0;
            lastTime = currentTime;
            $('#currentFPS').text(currentFPS);
        }
        
        // 定期进行人脸检测
        if (currentTime - lastDetectionTime >= detectionInterval) {
            // 异步检测，不阻塞视频播放
            detectFacesInFrame(enableRecognition, enableTracking).catch(error => {
                console.error('检测错误:', error);
            });
            lastDetectionTime = currentTime;
        }
        
        // 继续下一帧
        requestAnimationFrame(processFrame);
    }
    
    processFrame();
}

// 在帧中检测人脸
async function detectFacesInFrame(enableRecognition, enableTracking) {
    try {
        // 将canvas数据发送到服务器进行检测
        const imageData = canvas.toDataURL('image/jpeg', 0.7); // 降低质量以提高传输速度
        
        const response = await fetch('/detect_faces_video', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                image: imageData,
                enable_recognition: enableRecognition,
                enable_tracking: enableTracking
            })
        });
        
        if (response.ok) {
            const result = await response.json();
            updateDetectionResults(result);
        } else {
            console.error('服务器响应错误:', response.status, response.statusText);
            const errorText = await response.text();
            console.error('错误详情:', errorText);
        }
    } catch (error) {
        console.error('人脸检测错误:', error);
        // 在控制台显示更详细的错误信息
        if (error.name === 'TypeError' && error.message.includes('fetch')) {
            console.error('网络连接错误，请检查服务器是否运行');
        }
    }
}

// 更新检测结果
function updateDetectionResults(result) {
    // 更新检测到的人脸数量
    $('#detectedFaces').text(result.faces_detected || 0);
    
    // 统计识别的人脸数量
    const recognizedFaces = result.faces ? result.faces.filter(face => face.name && face.confidence > 0).length : 0;
    recognizedFacesCount = Math.max(recognizedFacesCount, recognizedFaces);
    $('#recognizedFaces').text(recognizedFacesCount);
    
    // 更新检测次数
    detectionCount++;
    $('#detectionCount').text(detectionCount);
    
    // 在canvas上绘制检测结果
    if (result.faces && result.faces.length > 0) {
        drawFaceBoxes(result.faces);
        // 显示实时用户信息
        showLiveUserInfo(result.faces);
    } else {
        // 如果没有检测到人脸，清除之前的绘制
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(document.getElementById('videoElement'), 0, 0, canvas.width, canvas.height);
        // 隐藏用户信息
        hideLiveUserInfo();
    }
    
    // 显示识别结果
    if (result.recognitions && result.recognitions.length > 0) {
        showRecognitionResults(result.recognitions);
    } else {
        // 清除识别结果显示
        $('#videoResult').removeClass('show');
    }
    
    // 调试信息
    console.log('检测结果:', result);
}

// 绘制人脸框
function drawFaceBoxes(faces) {
    // 清除之前的绘制，但保留视频帧
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(document.getElementById('videoElement'), 0, 0, canvas.width, canvas.height);
    
    faces.forEach(face => {
        const { top, right, bottom, left, name, confidence } = face;
        
        // 绘制人脸框
        ctx.strokeStyle = name ? '#27ae60' : '#e74c3c';
        ctx.lineWidth = 3;
        ctx.strokeRect(left, top, right - left, bottom - top);
        
        // 绘制标签背景
        if (name) {
            const text = `${name} (${(confidence * 100).toFixed(1)}%)`;
            const textWidth = ctx.measureText(text).width;
            
            ctx.fillStyle = '#27ae60';
            ctx.fillRect(left, top - 30, textWidth + 10, 25);
            
            // 绘制标签文字
            ctx.fillStyle = 'white';
            ctx.font = 'bold 14px Arial';
            ctx.fillText(text, left + 5, top - 12);
        } else {
            // 未识别的人脸显示"Unknown"
            const text = 'Unknown';
            const textWidth = ctx.measureText(text).width;
            
            ctx.fillStyle = '#e74c3c';
            ctx.fillRect(left, top - 30, textWidth + 10, 25);
            
            ctx.fillStyle = 'white';
            ctx.font = 'bold 14px Arial';
            ctx.fillText(text, left + 5, top - 12);
        }
    });
}

// 显示识别结果
function showRecognitionResults(recognitions) {
    const resultHtml = recognitions.map(rec => 
        `<div class="recognition-item">
            <i class="fas fa-user"></i>
            <span class="recognition-name">${rec.name}</span>
            <span class="recognition-confidence">${(rec.confidence * 100).toFixed(1)}%</span>
        </div>`
    ).join('');
    
    $('#videoResult').html(resultHtml).addClass('show');
}

// 显示实时用户信息
function showLiveUserInfo(faces) {
    const userInfoHtml = faces.map((face, index) => {
        const { name, confidence } = face;
        const isKnown = name && confidence > 0;
        const displayName = isKnown ? name : '未知用户';
        const confidenceText = isKnown ? `${(confidence * 100).toFixed(1)}%` : '未识别';
        const statusText = isKnown ? '已识别' : '检测到';
        const avatarText = isKnown ? name.charAt(0).toUpperCase() : '?';
        
        // 添加到检测历史
        addToDetectionHistory(displayName, isKnown, confidence);
        
        return `
            <div class="user-item ${isKnown ? '' : 'unknown-user'}">
                <div class="user-avatar">
                    ${avatarText}
                </div>
                <div class="user-details">
                    <div class="user-name">${displayName}</div>
                    <div class="user-status">${statusText}</div>
                </div>
                <div class="user-confidence">${confidenceText}</div>
            </div>
        `;
    }).join('');
    
    $('#userInfoContent').html(userInfoHtml);
    $('#liveUserInfo').show();
}

// 隐藏实时用户信息
function hideLiveUserInfo() {
    $('#liveUserInfo').hide();
}

// 添加到检测历史
function addToDetectionHistory(userName, isRecognized, confidence) {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    
    const historyItem = {
        time: timeString,
        user: userName,
        recognized: isRecognized,
        confidence: confidence
    };
    
    // 避免重复记录相同用户
    const lastItem = detectionHistory[detectionHistory.length - 1];
    if (!lastItem || lastItem.user !== userName || lastItem.time !== timeString) {
        detectionHistory.push(historyItem);
        
        // 限制历史记录数量
        if (detectionHistory.length > 50) {
            detectionHistory.shift();
        }
        
        updateDetectionHistoryDisplay();
    }
}

// 更新检测历史显示
function updateDetectionHistoryDisplay() {
    const historyHtml = detectionHistory.map(item => `
        <div class="history-item">
            <span class="history-time">${item.time}</span>
            <span class="history-user ${item.recognized ? 'recognized' : 'unknown'}">
                ${item.user} ${item.recognized ? `(${(item.confidence * 100).toFixed(1)}%)` : ''}
            </span>
        </div>
    `).join('');
    
    $('#historyContent').html(historyHtml);
}

// 切换检测历史显示
function toggleDetectionHistory() {
    const historyDiv = $('#detectionHistory');
    if (historyDiv.is(':visible')) {
        historyDiv.hide();
        $('#toggleHistory i').removeClass('fa-eye-slash').addClass('fa-history');
    } else {
        historyDiv.show();
        $('#toggleHistory i').removeClass('fa-history').addClass('fa-eye-slash');
    }
}

// 清除检测历史
function clearDetectionHistory() {
    detectionHistory = [];
    updateDetectionHistoryDisplay();
    showVideoResult('检测历史已清除', true);
}

// 停止视频检测
function stopVideoDetection() {
    console.log('停止视频检测，当前isVideoRunning:', isVideoRunning);
    isVideoRunning = false;
    
    // 停止视频流
    if (videoStream) {
        videoStream.getTracks().forEach(track => track.stop());
        videoStream = null;
    }
    
    // 隐藏视频和canvas
    ensureSingleVideoDisplay(); // 使用新的确保函数
    console.log('隐藏所有视频和canvas元素，显示占位符');
    
    // 隐藏用户信息
    hideLiveUserInfo();
    
    // 更新按钮状态
    $('#startVideoBtn').show();
    $('#stopVideoBtn').hide();
    $('#captureBtn').hide();
    
    // 重置统计
    $('#detectedFaces').text('0');
    $('#currentFPS').text('0');
    $('#recognizedFaces').text('0');
    $('#detectionCount').text('0');
    $('#videoResult').removeClass('show');
    
    // 重置计数器
    detectionCount = 0;
    recognizedFacesCount = 0;
    detectionHistory = [];
    
    showVideoResult('视频检测已停止', true);
}

// 截图功能
function captureFrame() {
    console.log('截图功能被调用，isVideoRunning:', isVideoRunning);
    
    if (!isVideoRunning) {
        console.log('视频未运行，无法截图');
        showVideoResult('视频未运行，无法截图', false);
        return;
    }
    
    if (!canvas || !ctx) {
        console.log('Canvas未初始化，无法截图');
        showVideoResult('Canvas未初始化，无法截图', false);
        return;
    }
    
    try {
        // 创建下载链接
        const link = document.createElement('a');
        link.download = `face_detection_${Date.now()}.png`;
        link.href = canvas.toDataURL();
        link.click();
        
        showVideoResult('截图已保存', true);
        console.log('截图成功保存');
    } catch (error) {
        console.error('截图失败:', error);
        showVideoResult('截图失败: ' + error.message, false);
    }
}

// 显示视频检测结果
function showVideoResult(message, isSuccess = true) {
    const className = isSuccess ? 'result-success' : 'result-error';
    const icon = isSuccess ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
    
    $('#videoResult').html(`<p><i class="${icon}"></i> ${message}</p>`).addClass('show');
    
    setTimeout(() => {
        $('#videoResult').removeClass('show');
    }, 3000);
} 